<template>
  <div>
    <el-divider content-position="left">
      <h3 class="fs-4">开发中心</h3>
    </el-divider>
    <ul class="v3-list">
      <li class="item" v-for="item in showV3" :key="item.title" @click="handleClick(item.link)">
        <div class="top">
          <img :src="item.icon" class="image">
          <div style="padding: 6px; font-size: 16px; font-weight: bolder; color: #333">
            <span>{{item.title}}</span>
          </div>
        </div>
        <hr style="background-color: rgba(204,204,204,0.6); border: 0; height: 1px;">
        <div class="p-1 hot-item">
          <ul v-if="item.title === '实战项目'" class="hot-one">
            <li v-for="project in hotProjectList" :key="project.id">
              <span @click.stop="handleClick(project.link)">
                {{project.title}}
              </span>
            </li>
          </ul>
          <ul v-if="item.title === '在线接口'" class="hot-one">
            <li v-for="inter in hotInterfaceList" :key="inter.id">
              <span @click.stop="handleClick(inter.link)">
                {{inter.title}}
              </span>
            </li>
          </ul>
          <ul v-if="item.title === '精品案例'">
            <li v-for="inter in hotExampleList" :key="inter.id">
              <span @click.stop="handleClick(inter.link,true)">
                {{inter.title}}
              </span>
            </li>
          </ul>
          <ul v-if="item.title === '资料中心'">
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import {showV3} from "@/mock-data/home";
  import {hotProjectList} from "@/mock-data/projectList";
  import {hotInterfaceList} from "@/mock-data/interfaceList";
  import {hotExampleList} from "@/mock-data/exampleList";

  export default {
    name: "wj-show-v3",
    data() {
      return {
        showV3,
        hotProjectList,
        hotInterfaceList,
        hotExampleList
      }
    },
    methods: {
      handleClick(link, blank) {
        if (blank) {
          window.open(link)
        } else {
          this.$router.push(link);
        }
      }
    }
  }
</script>

<style scoped>
  .v3-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .top {
    cursor: pointer;
  }

  .item {
    height: 230px;
    width: 32%;
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 8px 15px;
    box-sizing: border-box;
    text-align: center;
    border-top: 3px solid #ccc;
  }

  .item:hover {
    box-sizing: border-box;
    border-top: 3px solid #4c6ddb;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.11);
  }

  .image {
    width: 60px;
    height: 60px;
  }

  .hot-item {
    text-align: left;
    padding: 10px;
    box-sizing: border-box;
  }

  .hot-item span:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .hot-one {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
  }

  .hot-one li {
    margin: 2px 5px;
  }

</style>